<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo"  src="../../static/logo/orange.png" alt="" />
			
			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text"  maxlength="11"  v-model="userPhone"/>
			</view>
			<view class="login_code">
				<text>验证码</text>
				<input type="text"  maxlength="4"v-model="userCode" />
				<view hover-class="touchOpacity" 
				@click="getSms">获取验证码</view>
			</view>
			
			
			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity" >
				<text space="ensp" @click="login">登    录</text> 
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				userPhone:'',//手机号
				userCode:"",//用户输入的验证码
				sendStr:"获取验证码",//发送文字
				buffer:true,//发送短信开关
			}
		},
		methods: {
			//短信登录
			login(){
				let phone =this.userPhone;
				let code=this.userCode;
				let {value,time}=uni.getStorageSync('code');
				
				// console.log(phone)
				// console.log(code)
				//数据校验
				  //手机号验证
				if(!/^1[3456789]\d{9}/.test(phone)){
					this.$tool.tip('手机号格式有误');
					return;
				}
				
				  //验证码时间验证
				if(new Date().getTime()-time > 1000000){
					this.$tool.tip('验证码已经过期');
					return;
				}
				
				if(code != value){
					this.$tool.tip('验证码输入有误！');return;
				}
				//执行登录
				this.$http({
					url:'smslogin',
					method:'post',
					data:{phone}
				})
				.then(res=>{
					// console.logh(res)
					//将成功登录的用户信息存到本地
					uni.setStorageSync('userinfo',res.list)
					uni.setStorageSync('token',res.list.token)
					//提示用户登录成功
					this.$tool.tip('登录成功',"success")
					//跳转到个人中心
					uni.switchTab({
					url:"../user/user"
					})
				})
				.catch(err=>console.log(err))
				
			},
			// 获取短信验证码
				getSms(){
							if(this.buffer){
								// 1.获取手机号码
								let  phone = this.userPhone;
								
								// 2.验证格式  长度：11 test():bool 
								if( !/^1[3456789]\d{9}/.test(phone)){
									this.$tool.tip('手机号格式有误！');return;
								}
								
								// 3.执行发送
								this.$http({
									url:"sms",
									data:{phone}
								})
								.then(res=>{
									// 关闭发送开关
									console.log(res)
									this.buffer = false;
									// 将返回的手机号验证码缓存  后期做登录校验（值是否正确 是否过期）
									uni.setStorageSync('code',{value:res.list.code,time:new Date().getTime()})
									
									// 倒计时
									let n = 10;
									let t = setInterval(()=>{
										this.sendStr = `${n}s发送`;
										n--;
										if(n<0){
											this.sendStr = "获取验证码";
											clearInterval(t)
											n=10;
											this.buffer = true;
										}
									},1000)
								})
								.catch(err=>console.log(err))
							}else{
								this.$tool.tip('稍后发送！')
							}
						}
		
            },
}

</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>
